<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"  >
    <title><%= htmlWebpackPlugin.options.title %></title>

    <style>
        * {
            /* 初始化 */
            margin: 0;
            padding: 0;
        }

        body {
            /* 100%窗口高度 */
            height: 100vh;
        }

        .loader-wrapper {
            /* 固定定位 */
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 渐变背景 */
            background: linear-gradient(45deg, rgb(90, 54, 148) 0%, rgb(19, 189, 206) 33%, rgb(0, 148, 217) 66%, rgb(111, 199, 181) 100%);
            background-size: 400%;
            background-position: 0% 100%;
        }

        /* 旋转loading的外圈 */
        .loader {
            width: 150px;
            height: 150px;
            border: 3px solid transparent;
            border-top-color: #fff;
            /* 相对定位 居中 */
            position: relative;
            left: 50%;
            top: 50%;
            margin-left: -75px;
            margin-top: -75px;
            z-index: 2;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 执行旋转动画 */
            animation: spin 1.7s linear infinite;
        }

        /* 旋转loading的中圈 */
        .loader::before {
            content: "";
            /* 绝对定位 */
            position: absolute;
            top: 5px;
            left: 5px;
            bottom: 5px;
            right: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #fff;
            /* 执行反向的旋转动画 reverse:反向 */
            animation: spin 0.6s linear infinite reverse;
        }

        /* 旋转loading的内圈 */
        .loader::after {
            content: "";
            /* 绝对定位 */
            position: absolute;
            top: 15px;
            left: 15px;
            bottom: 15px;
            right: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #fff;
            /* 执行旋转动画 */
            animation: spin 1s linear infinite;
        }

        /* logo */
        .loader img {
            width: 55%;
            height: 55%;
            /* 执行反向的旋转动画,时长必须和外圈的动画一致(不让其跟着旋转) */
            animation: spin 1.7s linear infinite reverse;
        }

        .loader-text {
            width: 30%;
            height: 36px;
            /* 绝对定位 水平居中 */
            position: absolute;
            top: 72%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 防止选取 */
            user-select: none;
        }

        .loader-text div {
            width: 30px;
            height: 36px;
            color: #fff;
            font-size: 32px;
            margin: 0 20px;
            display: inline;
            margin-left: 30px;
        }

        /* 最后面的三个圆 */
        .loader-text div:nth-child(8)::before,
        .loader-text div:nth-child(9)::before,
        .loader-text div:nth-child(10)::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        /* 最后面的三个圆的投影 */
        .loader-text div:nth-child(8)::after,
        .loader-text div:nth-child(9)::after,
        .loader-text div:nth-child(10)::after {
            left: 0;
            margin-left: 0;
        }

        /* 旋转动画 */
        @keyframes spin {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body style="background: #1D3E5C;">
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
</noscript>
<div id="app" class="loader-wrapper">
    <div class="loader"><img src="favicon.ico" alt=""></div>
    <div class="loader-text" >
        <div>X</div>
        <div>U</div>
        <div>N</div>
        <div>D</div>
        <div>U</div>
        <div>N</div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"  ></script>
</body>


</html>
